<template>
  <div class="bs-page-main">
    <div class="user-home">
      <div class="main-box">
        <div v-show="!hideNav" class="sub-nav">
          <ul>
            <li>
              <router-link to="/user/detail" active-class="cur"
                ><i class="detail"></i>Account Details</router-link
              >
            </li>
            <li>
              <router-link to="/user/address" active-class="cur"
                ><i class="addr"></i>Delivery Addresses</router-link
              >
            </li>
            <li>
              <router-link to="/user/order" active-class="cur"
                ><i class="order"></i>Order History</router-link
              >
            </li>
            <li>
              <router-link to="/user/profile" active-class="cur"
                ><i class="profile"></i>Profile</router-link
              >
            </li>
          </ul>
        </div>
        <div :class="editFlag ? 'user-main edit-cur' : 'user-main'">
          <div :class="editFlag ? 'u-tit cur' : 'u-tit'">
            <div>Account Details</div>
            <router-link to="/user/profile" class="cls"></router-link>
          </div>
          <template v-if="editFlag">
            <div class="edit-ipt no-b">
              <div class="ipt-box">
                <div class="lb">Email</div>
                <div class="val">wm980207@gmail.com</div>
              </div>
              <div class="ipt-box error">
                <div class="lb">Password</div>
                <div class="ipt">
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    v-model="password"
                    placeholder="ENTER YOUR PASSWORD"
                  />
                  <a
                    href="javascript:"
                    :class="showPassword ? 'show cur' : 'show'"
                    @click="showPassword = !showPassword"
                  ></a>
                </div>
                <div class="error-txt">erro information</div>
              </div>
              <div class="ipt-box">
                <div class="lb">Phone Number</div>
                <div class="ipt">
                  <input type="text" placeholder="ENTER YOUR PHONE NUMBER" />
                  <div class="select-country">
                    <div class="cur-c"><em class="usa"></em><i></i></div>
                  </div>
                </div>
              </div>
              <div class="ipt-box">
                <div class="lb">Date of Birth</div>
                <div class="ipt">
                  <a-date-picker
                    placeholder="ENTER YOUR DATE OF BIRTH"
                    format="DD/MM/yyyy"
                    :allowClear="false"
                    class="date-ipt"
                  />
                  <i class="date"></i>
                </div>
              </div>
              <div class="blank-div"></div>
              <div class="btn">
                <a href="javascript:" class="save">Save</a>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const isMobile = document.documentElement.clientWidth < 800;
export default {
  data() {
    return {
      editFlag: true,
      isMobile,
      password: "",
      showPassword: false,
    };
  },
  computed: {
    hideNav() {
      return isMobile && this.editFlag;
    },
  },
  methods: {},
};
</script>
